<template>
  <div>
    <div class="con1">
      <div class="left">
        <div v-for="(a, index) in left" :key="index">
          <div class="name">
            {{ a.name }} >
            <div class="left-box">
              <div class="left-name">全部类别</div>
              <div class="left-items">
                <div
                  class="left-item oneline"
                  v-for="(items, i) in a.smallList"
                  :key="i"
                  @click="linkDetail(items.id)"
                >
                  {{ items.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="items">
            <div
              class="item oneline"
              v-for="(items, i) in a.smallList"
              :key="i"
              @click="linkDetail(items.id)"
            >
              <div v-if="i < 4">{{ items.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zhong">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in lunbo" :key="item.id">
            <img
              :src="item.imgUrl"
              style="width: 100%;height: 100%;"
              @click="linkLunbo(item)"
            />
          </el-carousel-item>
        </el-carousel>
        <div class="zhongdi">
          <img
            v-if="tuiguang.length > 0"
            :src="tuiguang[0].imgUrl"
            @click="linkLunbo(tuiguang[0])"
          />
          <img
            v-if="tuiguang.length > 1"
            :src="tuiguang[1].imgUrl"
            @click="linkLunbo(tuiguang[1])"
          />
        </div>
      </div>
      <div class="right">
        <img
          class="tou"
          @click="linkUser"
          :src="info.avator || avator"
          alt="头像"
        />
        <div class="name" @click="linkUser">
          {{ info.name || "欢迎来到中铁商城" }}
        </div>
        <div class="geren" @click="linkUser">
          {{ info.name ? "个人中心" : "登录" }}
        </div>
        <div class="dingdan" @click="dingdan" style="info.name?'':'opacity'">
          <div>
            <div>{{ info.payNum || 0 }}</div>
            <div>待付款</div>
          </div>
          <div>
            <div>{{ info.shouNum || 0 }}</div>
            <div>待收货</div>
          </div>
          <div>
            <div>{{ info.pingNum }}</div>
            <div>已完成</div>
          </div>
        </div>
        <div class="gonggao">
          <div @click="gonggao()">公告资讯</div>
          <div>
            <div
              v-for="item in zixun"
              :key="item.id"
              @click="linkZixun(item.id)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="con2">
      <div class="left">
        <div class="one">海量商机 精准匹配</div>
        <div class="two">
          <div>1. 智能匹配优质商品</div>
          <div>2. AI专家需求解读</div>
          <div>3. 优质需求扩大招标</div>
          <div>4. 24小时获得响应</div>
        </div>
        <div class="thw" @click="linkRelease">发布需求</div>
        <img
          class="img"
          src="@/assets/img/robot.png"
          alt=""
          @click="kai"
          srcset=""
        />
      </div>
      <div class="right">
        <div>
          <div>
            最新发布<span>{{ total }}</span
            >个需求
          </div>
          <div @click="linkXuqiu()" style="cursor: pointer;">更多 ></div>
        </div>
        <div class="forlist">
          <div
            v-for="(item, index) in xuqiu"
            :key="index"
            @mouseenter="mou(index)"
            @mouseleave="mou1(index)"
          >
            <div>
              <div style="">{{ item.title }}</div>
              <div>{{ item.intro }}</div>
              <div>
                <span
                  >{{ item.caAt ? item.caAt.substring(5, 10) : "" }}发布</span
                ><span>{{ item.city }}</span
                ><span>{{ item.count || 0 }}家已领取</span>
              </div>
              <div v-show="item.userCount == 0" class="a c">
                可领取
              </div>
              <div v-show="item.userCount > 0" class="a b">
                已领取
              </div>
            </div>
            <transition name="el-zoom-in-bottom">
              <div class="show" v-show="item.sta">
                <div
                  @click="lingqu(item.id, index)"
                  :style="
                    item.userCount > 0
                      ? 'background: #d5d5d5;color:#999999;border-color:#d5d5d5'
                      : ''
                  "
                >
                  {{ item.userCount > 0 ? "已领取" : "我来领取" }}
                </div>
                <div @click="linkXuqiu(item.id)">查看详情</div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <div class="con3">
      <div class="tou">
        <div class="title">精选热门产品</div>
        <div class="hr"></div>
        <div class="right">
          <div @click="arrowClick">
            <img v-show="index == 1" src="@/assets/img/left1.png" />
            <img v-show="index != 1" src="@/assets/img/left2.png" />
          </div>
          <div @click="arrowClick1">
            <img
              v-show="index == jingxuan.length"
              src="@/assets/img/right1.png"
            />
            <img
              v-show="index != jingxuan.length"
              src="@/assets/img/right2.png"
            />
          </div>
        </div>
      </div>
      <el-carousel
        height="564px"
        :loop="true"
        ref="cardShow"
        arrow="never"
        @change="change"
        :interval="4500"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="(item, index) in jingxuan"
          :key="index"
          class="a"
        >
          <div
            v-for="items in item"
            :key="items.id"
            class="list"
            @click="linkgoods(items.id)"
          >
            <img :src="items.imgurl" class="img" />
            <div class="name">
              <div class="one">{{ items.name }}</div>
              <div class="to"><span>￥</span>{{ items.price }}</div>
              <div class="ziying">
                <img
                  v-if="items.shopTag == 1"
                  src="@/assets/img/dianpu/zhiying.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      avator: require("@/assets/img/user.png"),
      show: true, //领取
      index: 1, //左右
      left: [],
      lunbo: [],
      tuiguang: [],
      info: {},
      zixun: [],
      total: 0,
      xuqiu: [], //需求
      jingxuan: []
    };
  },
  mounted() {
    this.getLeft();
    this.getLunbo();
    this.getTuiguang();
    if (localStorage.getItem("userId")) {
      this.getInfo();
    }
    this.getZixun();
    this.getXuqiu();
    this.getJingxuan();
  },
  methods: {
    kai() {
      _MEIQIA("showPanel");
    },
    getLeft() {
      this.$postRequest("/api/goods/getClassList", {
        pageNum: 1,
        pageSize: 5
      }).then(res => {
        this.left = res.data.list;
      });
    },
    change(e) {
      this.index = e + 1;
    },
    getLunbo() {
      this.$postRequest("/api/cms/slide/list", {
        type: 1
      }).then(res => {
        this.lunbo = res.data;
      });
    },
    getTuiguang() {
      this.$postRequest("/api/cms/slide/list", {
        type: 2
      }).then(res => {
        this.tuiguang = res.data;
      });
    },
    getInfo() {
      this.$postRequest("/api/member/getMemberCenter", {
        userId: localStorage.getItem("userId")
      }).then(res => {
        this.info = res.map;
      });
    },
    getZixun() {
      this.$postRequest("/api/mallNews/getHotNews", {}).then(res => {
        this.zixun = res.data;
      });
    },
    getXuqiu() {
      this.$postRequest("/api/mallNeed/getNewNeedList", {
        userId: localStorage.getItem("userId") || -1,
        pageNum: 1,
        pageSize: 6
      }).then(res => {
        this.xuqiu = res.data.list;
        this.total = res.data.total;
      });
    },
    getJingxuan() {
      this.$postRequest("/api/goods/recommend", {
        type: 0,
        userId: localStorage.getItem("userId") || "",
        pageNum: 1,
        pageSize: 22
      }).then(res => {
        var arr = [];
        console.log("res", res);
        var list = res.data.list;
        if (list.length <= 12) {
          arr.push(list);
        } else if (list.length <= 24) {
          arr.push(list.splice(0, 12));
          arr.push(list.splice(0, list.length));
        } else {
          arr.push(list.splice(0, 12));
          arr.push(list.splice(0, 12));
          arr.push(list.splice(0, list.length));
        }
        this.jingxuan = arr;
        console.log(this.jingxuan);
      });
    },
    linkDetail(id) {
      // 跳转二级分类
      this.$router.push({ name: "classification", params: { id: id } });
    },
    linkLunbo(item) {
      if (item.mode == 0) {
        const Detail = this.$router.resolve({
          name: "detail",
          query: { id: item.goodsId }
        });
        window.open(Detail.href, "_blank");
      } else if (item.mode == 1) {
        window.location.href = item.linkUrl;
      }
    },
    linkUser() {
      if (this.info.name) {
        this.$router.push({ name: "yindex" });
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    dingdan() {
      if (this.info.name) {
        this.$router.push({ name: "yorder" });
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    linkZixun(id) {
      // this.$router.push({ name: 'notticitem', params: { id: id } })
      this.$router.push({ path: "/home/notticitem", query: { id: id } });
    },
    gonggao() {
      this.$router.push({ name: "notice" });
    },
    linkRelease() {
      if (localStorage.getItem("userId")) {
        this.$router.push({ name: "release" });
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    linkXuqiu(id) {
      if (id) {
        // this.$router.push({name:''})
        this.$router.push({ name: "releaseitem", query: { id: id } });
      } else {
        this.$router.push({ name: "demand" });
      }
    },
    lingqu(id, index) {
      if (localStorage.getItem("userId")) {
        this.$postRequest("/api/mallNeed/receiveNeed", {
          userId: localStorage.getItem("userId"),
          needId: id
        }).then(res => {
          let xuqiu = JSON.parse(JSON.stringify(this.xuqiu));
          xuqiu[index].userCount = 1;
          this.xuqiu = xuqiu;
          this.$message.success("领取成功");
        });
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    linkgoods(id) {
      // this.$router.push({ name: 'detail', params: { id: id } })
      let Detail = this.$router.resolve({
        path: "/home/detail",
        query: {
          id
        }
      });
      window.open(Detail.href, "_blank");
    },
    mou(index) {
      let xuqiu = JSON.parse(JSON.stringify(this.xuqiu));
      xuqiu[index].sta = true;
      this.xuqiu = xuqiu;
    },
    mou1(index) {
      let xuqiu = JSON.parse(JSON.stringify(this.xuqiu));
      xuqiu[index].sta = false;
      this.xuqiu = xuqiu;
    },
    arrowClick() {
      //左
      if (this.index != 1) {
        this.index = this.index - 1;
        this.$refs.cardShow.prev();
      }
    },
    arrowClick1() {
      //右
      if (this.index < this.jingxuan.length) {
        this.index = this.index + 1;
        this.$refs.cardShow.next();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.con1 {
  padding: 20px 0;
  display: flex;
  .left {
    width: 250px;
    height: 600px;
    background: #ffffff;
    border-top: 5px solid #1a69e0;
    padding: 25px 0px 0 30px;
    box-sizing: border-box;
    position: relative;
    .name {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      line-height: 34px;
      transition: all 2s;
      .left-box {
        width: 250px;
        height: 600px;
        border: 1px solid #1a69e0;
        background: #ffffff;
        display: none;
        position: absolute;
        top: 0;
        left: 250px;
        z-index: 999;
        .left-name {
          width: 200px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #000000;
          margin: 25px 25px 5px;
        }
        .left-items {
          width: 200px;
          height: 500px;
          // background: #dddddd;
          display: flex;
          flex-flow: row wrap;
          margin-left: 25px;
          align-content: flex-start;
          .left-item {
            width: calc(50% - 10px);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            line-height: 28px;
            margin-right: 10px;
            cursor: pointer;
            &:hover {
              color: rgba(117, 117, 117, 0.8);
            }
          }
        }
      }
      &:hover {
        background: #1a69e0;
        color: #ffffff;
        .left-box {
          display: block;
          // display: none;
        }
      }
    }
    .items {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: 10px;
    }
    .item {
      width: calc(50% - 10px);
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: rgba(117, 117, 117, 0.8);
      }
    }
  }
  .zhong {
    width: 860px;
    height: 600px;
    margin: 0 20px;
    .zhongdi {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      img {
        width: 420px;
        height: 180px;
      }
    }
  }
  .right {
    width: 250px;
    height: 600px;
    background: #ffffff;
    padding: 65px 20px 5px;
    box-sizing: border-box;
    .tou {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: block;
      margin: 0 auto 19px;
      cursor: pointer;
    }
    .name {
      height: 20px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      text-align: center;
      margin-bottom: 30px;
      cursor: pointer;
    }
    .geren {
      width: 200px;
      height: 40px;
      background: #1a69e0;
      margin: 0px auto 20px;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      &:active {
        background-color: rgba(26, 105, 224, 0.8);
      }
    }
    .dingdan {
      width: 100%;
      display: flex;
      justify-content: space-between;
      text-align: center;
      font-weight: 400;
      color: #000000;
      font-family: Microsoft YaHei;
      font-size: 16px;
      cursor: pointer;
      & > div > div:nth-child(1) {
        height: 13px;
      }
      & > div > div:nth-child(2) {
        height: 16px;
        margin-top: 9px;
      }
    }
    .gonggao {
      border-top: 1px solid #eeeeee;
      margin-top: 50px;
      & > div:nth-child(1) {
        height: 60px;
        line-height: 70px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1a69e0;
        cursor: pointer;
      }
      & > div:nth-child(2) {
        font-size: 16px;
        line-height: 34px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        div {
          cursor: pointer;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          &:hover {
            color: #888;
          }
        }
      }
    }
  }
}
.con2 {
  padding-bottom: 20px;
  display: flex;
  .left {
    width: 250px;
    height: 380px;
    background: #ffffff;
    margin-right: 20px;
    position: relative;
    padding: 60px 25px 25px;
    .one {
      height: 22px;
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      margin-bottom: 48px;
    }
    .two {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      div {
        height: 28px;
      }
    }
    .thw {
      width: 180px;
      height: 36px;
      line-height: 36px;
      border: 1px solid #1a69e0;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1a69e0;
      text-align: center;
      position: absolute;
      left: 35px;
      bottom: 30px;
      cursor: pointer;
    }
    .img {
      width: 63px;
      height: 84px;
      position: absolute;
      right: 20px;
      top: 148px;
    }
  }
  .right {
    width: 1130px;
    height: 380px;
    background: #ffffff;
    padding: 10px 20px;
    & > div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      line-height: 56px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      span {
        color: #1a69e0;
      }
      & > div:nth-child(2) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }
    .forlist {
      display: flex;
      flex-flow: row wrap;
      & > div {
        width: 350px;
        height: 130px;
        border: 1px solid #eeeeee;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 20px;
        position: relative;
        .show {
          width: 350px;
          height: 40px;
          position: absolute;
          bottom: 0;
          left: 0;
          cursor: pointer;
          display: flex;
          & > div:nth-child(1) {
            width: 175px;
            height: 40px;
            border: 1px solid #1a69e0;
            background: #1a69e0;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
          & > div:nth-child(2) {
            width: 175px;
            height: 40px;
            background: #ffffff;
            border: 1px solid #1a69e0;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #1a69e0;
            line-height: 40px;
            text-align: center;
            margin: 0;
          }
        }
        &:nth-child(3n) {
          margin-right: 0px;
        }
        & > div > div:nth-child(1) {
          width: 250px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        & > div > div:nth-child(2) {
          width: 307px;
          height: 15px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          margin: 18px 0;
          color: #666666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        & > div > div:nth-child(3) {
          height: 15px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          span {
            margin-right: 30px;
            &:last-child {
              margin-right: 0px;
            }
          }
        }
        .a {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 60px;
          height: 25px;
          line-height: 23px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-align: center;
        }
        .c {
          color: #1a69e0;
          border: 1px solid #1a69e0;
          cursor: pointer;
        }
        .b {
          color: #999999;
          border: 1px solid #999999;
        }
      }
    }
  }
}
.con3 {
  width: 1400px;
  height: 700px;
  background: #ffffff;
  margin-bottom: 20px;
  padding: 40px 20px 0;
  .tou {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    .title {
      height: 25px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      position: relative;
      margin-bottom: 5px;
      &::before {
        content: "";
        position: absolute;
        width: 139px;
        height: 3px;
        background: #1a69e0;
        top: 35px;
        left: 3px;
      }
    }
    .hr {
      flex: 1;
      height: 1px;
      background: #eeeeee;
    }
    .right {
      display: flex;
      padding: 0 6px 0 18px;
      div {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        display: flex;
        cursor: pointer;
        img {
          width: 11px;
          height: 19px;
          margin: auto;
          display: block;
        }
        &:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
  }
  .a {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    .list {
      width: 210px;
      height: 272px;
      margin-right: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      &:nth-child(6n) {
        margin-right: 0px;
      }
      .img {
        width: 210px;
        height: 210px;
      }
      .name {
        position: relative;
        width: 210px;
        height: 70px;
        background: #ffffff;
        // border: 1px solid #f9f9f9;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        .ziying {
          position: absolute;
          right: 0;
          bottom: 15px;
          img {
            width: 40px;
            height: 20px;
          }
        }
        .one {
          height: 30px;
          line-height: 30px;
        }
        .to {
          height: 30px;
          line-height: 30px;
          color: #e0441a;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 24px;
          span {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>